<template>
	<div id="total" style="height: 400px;width: 100%;"></div>
</template>
  
<script>
import * as echarts from 'echarts';
export default {
	props:{
		badList:{
			type:Object,
			default:()=>({})
		}
	},
	data() {
		return {
		}
	},
	mounted() {
		// console.log(this.badList[0].date.split(' '));
		this.initChart(this.badList)
	},
	methods: {
		initChart() {
			var chartDom = document.getElementById('total');
			var myChart = echarts.init(chartDom);
			var option;
			option = {
				title: {
					text: '不良率'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['逾期≥1天', '逾期≥7天', '逾期≥30天', '逾期≥60天', '逾期≥90天']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9','2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '逾期≥1天',
						type: 'line',
						stack: 'Total',
						data: [120, 132, 101, 134, 90, 230, 210,201,110,190,301,150]
					},
					{
						name: '逾期≥7天',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310,401,101,501,550,110]
					},
					{
						name: '逾期≥30天',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310,401,101,501,550,110]
					},
					{
						name: '逾期≥60天',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310,401,101,501,550,110]
					}
					,
					{
						name: '逾期≥90天',
						type: 'line',
						stack: 'Total',
						data: [220, 182, 191, 234, 290, 330, 310,401,101,501,550,110]
					}
				]
			};
			option && myChart.setOption(option);
		},
	}
}
</script>
  
<style lang="scss" scoped>

</style>
  